<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>医院住院部管理系统-管理员</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <link rel="stylesheet" th:href="@{https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/jqvmap/jqvmap.min.css}">
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}">
    <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-bs4.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
    <link th:href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700}" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
        <div class="container">
            <div class="collapse navbar-collapse order-3">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/index}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/patient}">患者</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/doctor}">医生</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/drug}">药物</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/exam}">检测</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/bed}">床位</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/schedule}">排班</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/echarts}">图表</a>
                    </li>
                </ul>
            </div>
            <ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
                <li class="nav-link">
                    <a class="nav-link" href="/doctor/index" th:text="${session.username}"></a>
                </li>
                <li class="nav-link">
                    <a class="nav-link" href="/logout" th:text="'注销'"></a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="card-body">
    <div class="content-wrapper">
        <div class="content-header">
        </div>
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <div id="main1" style="width: 600px; height: 400px;"></div>
                        <div class="card-title">药单图表显示</div>
<!--                        <div id="main" style="width:100%"></div>-->
                    </div>
                    <div class="col-6">
                        <div id="main2" style="width: 600px; height: 400px;"></div>
                        <div class="card-title">检测图表显示</div>
                    </div>
                </div>
                <div></div>
                <div class="row">
                    <div class="col-6">
                        <div id="main3" style="width: 600px; height: 400px;"></div>
                        <div class="card-title">药单图表显示</div>
                        <!--                        <div id="main" style="width:100%"></div>-->
                    </div>
                    <div class="col-6">
                        <div id="main4" style="width: 600px; height: 400px;"></div>
                        <div class="card-title">饼状图图表显示</div>
                        <!--                        <div id="main" style="width:100%"></div>-->
                    </div>
                </div>




            </div>
        </div>

    </div>
    </div>
    <div th:insert="temp::footer"></div>
</div>


<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.js}"></script>
<!-- DataTables -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>
<!-- page script -->
<script>
    $(function () {
        $('#table1').DataTable({
            "paging": true,
            "emptyTable": "您没有病人了",
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "search": "搜索",
            "infoEmpty": "无记录",
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "尾页"
            }
        });
    });
</script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

<script type="text/javascript">




    var dom = document.getElementById('main1');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var drug_date = [[${drug_date}]];
    var drug_num = [[${drug_num}]];
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: drug_date
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: drug_num,
                type: 'line'
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);





    var dom2= document.getElementById('main2');
    var myChart2 = echarts.init(dom2, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var drug_date2 = [[${drug_date2}]];
    var drug_num2 = [[${drug_num2}]];
    var option2;

    option2 = {
        xAxis: {
            type: 'category',
            data: drug_date2
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: drug_num2,
                type: 'line'
            }
        ]
    };

    if (option2 && typeof option2 === 'object') {
        myChart2.setOption(option2);
    }

    window.addEventListener('resize', myChart2.resize);







    var dom3 = document.getElementById('main3');
    var myChart3 = echarts.init(dom3, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var count_list = [[${count_list}]];
    var option3;

    option3 = {
        xAxis: {
            type: 'category',
            data: ['patient', 'bed', 'doctor', 'exam', 'drug']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value: count_list[0],
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: count_list[1],
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: count_list[2],
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: count_list[3],
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    {
                        value: count_list[4],
                        itemStyle: {
                            color: '#a90000'
                        }
                    }

                ],
                type: 'bar'
            }
        ]
    };

    if (option3 && typeof option3 === 'object') {
        myChart3.setOption(option3);
    }

    window.addEventListener('resize', myChart3.resize);






    var dom4 = document.getElementById('main4');
    var myChart4 = echarts.init(dom4, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};



    var option4;

    option4 = {
        title: {
            text: 'Referer',
            subtext: 'Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'num',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: count_list[0], name: 'patient' },
                    { value: count_list[1], name: 'bed' },
                    { value: count_list[2], name: 'doctor' },
                    { value: count_list[3], name: 'exam' },
                    { value: count_list[4], name: 'drug' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option4 && typeof option4 === 'object') {
        myChart4.setOption(option4);
    }

    window.addEventListener('resize', myChart4.resize);


</script>
</body>
</html>